<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		if(canvas.getContext){
			var context = canvas.getContext("2d");
			context.strokeRect(50,50,100,200);
			context.stroke();
			
			var lgdt = context.createLinearGradient(50,50,100,250);
			//lgdt.addColorStop(stop,color) stop取0-1表示起始和结束的位置
			lgdt.addColorStop(0,"#000000");
			lgdt.addColorStop(0.5,"#249192");
			lgdt.addColorStop(0.6,"#555879");
			lgdt.addColorStop(0.9,"#778899");
			lgdt.addColorStop(1,"#ffffff");
			context.fillStyle = lgdt;
			context.fillRect(50,50,100,200);
			
			
		}
		
		
	</script>
</html>
